export const newCCList = () => {
  const persons = JSON.parse(localStorage.getItem('personsMap') ?? '{}');
  const ccSelect = document.querySelector('#newcc') as HTMLSelectElement;
  const ccSelectOptions = Array.from(document.querySelectorAll('#newcc > option')) as HTMLOptionElement[];

  const div = document.createElement('div');
  div.id = 'cc_list_vue_app';
  (ccSelect.parentNode as HTMLDivElement).insertBefore(div, ccSelect);
  ccSelect.classList.add('bz_default_hidden');

  ccSelectOptions.forEach((node) => {
    const strMatch = node.innerText.match(/<([^]+)@(yonghongtech|test|sina).(com|cn)>/);
    const englishName = strMatch ? strMatch[1] : '';
    // @ts-ignore
    node.innerText = englishName && persons[englishName] ? persons[englishName] + ' - ' + (node.innerText.replace('-', '').replace(persons[englishName], '')) : node.innerText;
  })
  
  const { createApp, ref, reactive } = Vue;

  const app = createApp({
    template: `
      <n-select
        v-model:value="selectedValue"
        filterable
        :options="options"
        @update:value="handleUpdateValue"
      ></n-select>
    `,
    setup() {
      const selectedValue = ref(ccSelect.value);
      const options = reactive(ccSelectOptions.map((option) => {
        return {
          label: option.innerText,
          value: option.value,
        }
      }));

      return {
        selectedValue,
        options,
        handleUpdateValue(value: string) {
          ccSelect.value = value;
        }
      }
    }
  });

  app.use(naive);
  app.mount('#cc_list_vue_app');
};
